<template>
  <div class="bill-detail-box">
    <div class="pay-img-box">
      <img src="@icon/successPay.png" alt="" class="pay-img">
    </div>
    <h3 class="title">付款账户删除成功</h3>
    <h3 class="amount">您已成功删除付款账户(卡号:6666****6688)</h3>
    <div class="staging-box" @click="_goPage('paymentSuccess')">确定</div>

    <div class="img-box">
      <img src="@icon/皇冠.jpg" alt="">
    </div>
  </div>
</template>

<script>
import {globalMethods} from "../common/mixins.js"

export default {
  name: "billDetail",
  mixins: [globalMethods],
  data() {
    return {
      detailList: [
        {leftValue: '分期类型', rightValue: '商户分析'},
        {leftValue: '分期日期', rightValue: '2021-01-22'},
        {leftValue: '总期数', rightValue: '24'},
        {leftValue: '当前期数', rightValue: '18'},
        {leftValue: '剩余期数', rightValue: '6'},
        {leftValue: '分期总本金/币种', rightValue: '10,969.00人民币'},
        {leftValue: '本期应还本金/币种', rightValue: '457,00人民币'},
        {leftValue: '剩余应还本金/币种', rightValue: '2,742.00人民币'},
      ],
    }
  }
}
</script>

<style lang="stylus" scoped>
.staging-box
  display flex
  width 686px
  height 88px
  background #FFA900
  border-radius 8px
  color #fff
  font-size 36px
  align-items center
  justify-content center
  margin 30px auto

.bill-detail-box
  display flex
  width 100%
  flex-direction column
  background #fff
  min-height 100vh
  color #333
  .pay-img-box
    display flex
    align-items center
    justify-content center
    padding-bottom 63px
    padding-top 120px
    .pay-img
      width 180px
      height 180px
  .title
    padding 52px 0 120px
    display flex
    align-items center
    justify-content center
    font-size 36px
    font-weight 400
    background #fff

  .amount
    display flex
    align-items center
    justify-content center
    padding-bottom 120px
    font-weight 400
    background #fff
    color #666
    font-size 32px
  .detail-info
    padding 0 30px
    background #fff
    display flex
    flex-direction column
    font-size 32px
    .info-item
      display flex
      align-items center
      justify-content space-between
      margin-bottom 47px
      .text-gary
        color #666
    .dispute
      font-size 24px
      height 63px
      display flex
      align-items center
      justify-content flex-end
      color #FFA900
      border-top 1px solid #f7f7f7
  .img-box
    padding 30px 32px
    height 220px
    img
      width 100%
      height 100%
</style>
